<template>
<!-- <div id="mainwagersoldedgague" style="width: 100%; height: 100%"></div> -->
  <div style="diaplay:flex;flex-direction: column; width: 100%; height: 100%">
    <div id="mainwagersoldedgague" style="width: 100%; height: 90%;"></div>
    <div style="position:relative;width: 100%; height: 5%;bottom:27%;left:27%;font-size:12px">环比下降{{momWaterRatio}}%</div>
    <div style="position:relative;width: 100%; height: 5%;bottom:20%;left:27%;font-size:12px">同比下降{{qoqWaterRatio }}%</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props:['waterSoledRatio'],
  data() {
    return {
      chart: null,
      chartData: [],
      optiondata: null,
      momWaterRatio:"",
      qoqWaterRatio:'',
    };
  },
  watch: {
    waterSoledRatio(){
      this.momWaterRatio=this.waterSoledRatio.momWaterRatio
      this.qoqWaterRatio=this.waterSoledRatio.qoqWaterRatio
      // this.chartData=[]
      // for (let i in this.waterSoledRatio){
      //   this.chartData.push(this.waterSoledRatio[i])
      // }
      this.initChart()
    },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      if(!this.chart ){
      this.chart = echarts.init(document.getElementById("mainwagersoldedgague"), "macarons");
      }
      this.setOptions(this.chartData);
    },
    setOptions(datad) {
      this.optiondata = {
        title: {
          text: "总供水量比例",
          show: true,
          offsetCenter: [0, "-130%"], // x, y，单位px
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          formatter: "{a} : {c}%",
        },
        // toolbox: {
        //     show : true,
        //     feature : {
        //         mark : {show: true},
        //         restore : {show: true},
        //         saveAsImage : {show: true}
        //     }
        // },
        series: [
          {
            name: "总售水量比例",
            type: "gauge",
            min: 0,
            max: 100,
            startAngle: 190,
            endAngle: -10,
            splitNumber: 10, // 分割段数，默认为5
            radius: "75%",
            progress: {
              show: true,
              width: true,
              overlap: false,
              color: "ffffff",
            },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  [0.2, "#ff4500"],
                  [0.8, "#ff4500"],
                  [1, "#ff4500"],
                ],
                width: 1, //仪表盘外围圆宽度
                shadowColor: "#ff4500", //默认透明
                shadowBlur: 1,
              },
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5, // 每份split细分多少段
              length: 1, // 属性length控制线长
              distance: 1,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto",
              },
            },
            axisLabel: {
              // 坐标轴文本标签，详见axis.axisLabel
              show: true,
              distance: 0,
              fontSize: 6,
            },
            splitLine: {
              // 分隔线
              show: true, // 默认显示，属性show控制显示与否
              length: 6, // 属性length控制线长
              distance: 2,
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 1,

                color: "#ff4500",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            pointer: {
              show: false,
              width: 4,
              length: 100,
              color: "#ff4500",
            },
            detail: {
              name: "{name}",
              formatter: "{value}" + "%",
              offsetCenter: [0, "-10%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                fontSize: 14,
                color: "#fff",
              },
            },
            data: [{ value: this.waterSoledRatio.waterRatio}],
            center: ["50%", "60%"],
          },
        ],
      };

      this.chart.setOption(this.optiondata);
    },
  },
};
</script>
